<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  FormRules,
  ComponentSize,
  FormInstance
} from 'element-plus'

interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  count: '',
  date1: '',
  date2: '',
  delivery: true,
  name: '',
  region: ''
})

const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: 'API名称不能为空', trigger: 'blur' }],
  region: [
    {
      required: true,
      message: '内容不能为空',
      trigger: 'change'
    }
  ]
})
const dialogVisible = ref(false)
const dialogTitle = ref('')

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const submit = async () => {
  // const elForm = await getElFormExpose()
  // const valid = await elForm?.validate().catch((err) => {
  //   console.log(err)
  // })
  // if (valid) {
  //   const formData = await getFormData()
  //   return formData
  // }
}

const onSubmit = () => {
  console.log('submit!')
}

const showDialog = (val) => {
  dialogVisible.value = val
}

const setTitle = (val) => {
  dialogTitle.value = val
}

defineExpose({
  showDialog,
  setTitle,
  submit
})
</script>

<template>
  <div class="rules-add-write">
    <!-- label-width="auto" -->
    <el-form
      ref="ruleFormRef"
      class="demo-form-inline"
      :inline="true"
      :model="ruleForm"
      :rules="rules"
      :size="formSize"
      status-icon
    >
      <el-form-item label="服务资源名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="服务资源类型" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择...">
          <el-option label="Zone one" value="shanghai" />
        </el-select>
      </el-form-item>
      <p>流量分类标识</p>
      <div class="flow-lass">
        <el-form-item label="一级分类标识" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择...">
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类标识" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="三级分类标识" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
      </div>
      <el-form-item label="规则类型" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择...">
          <el-option label="Zone one" value="shanghai" />
        </el-select>
        <el-select style="margin-left: 10px" v-model="ruleForm.region" placeholder="请选择...">
          <el-option label="Zone one" value="shanghai" />
        </el-select>
      </el-form-item>
      <p>规则参数</p>
      <div class="rules">
        <el-form-item label="窗口数" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="统计时长" prop="name">
          <el-input v-model="ruleForm.name" />
          <el-select style="margin-left: 10px" v-model="ruleForm.region" placeholder="请选择...">
            <el-option label="秒" value="0" />
            <el-option label="分钟" value="1" />
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="生效时间" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="失效时间" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;

  .text {
    position: absolute;
    left: 50%;
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    line-height: 24px;
    border-radius: 50%;
    transform: translateX(-50%);
  }

  &.current {
    .text {
      color: #fff;
      background: #626aef;
    }
  }

  .holiday {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--el-color-danger);
    border-radius: 50%;
    transform: translateX(-50%);
  }
}

.transfer-footer {
  padding: 6px 5px;
  margin-left: 15px;
}

.el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
.rules-add-write {
  padding: 20px;
}
.el-select {
  width: 200px;
}
.el-input {
  width: 200px;
}
</style>
